---
import { Picture } from "astro:assets"
import { Content, frontmatter } from "@content/about.md"
import src from "../../assets/vladislav.atakhanov.jpg"
import { preview } from "../../utils/image"
const base64 = await preview("./src/assets/vladislav.atakhanov.jpg")

const alt = `${frontmatter["image-description"]}`
---

<div class="about">
    <Picture
        src={src}
        alt={alt}
        widths={[200, 400]}
        formats={["avif", "webp", "jpeg"]}
        class="about__image"
        style={{ backgroundImage: `url(${base64})` }}
    />
    <div><Content /></div>
</div>

<style>
    .about {
        --image-size: 220px;
        align-items: center;
        margin-bottom: -1em;
        display: grid;
        gap: 1em 3em;
    }
    @media (width >= 800px) {
        .about {
            grid-template-columns: var(--image-size) auto;
            margin-top: -1em;
        }
    }
    :global(.about__image) {
        width: var(--image-size);
        height: var(--image-size);
        border-radius: 50%;
        display: block;
        margin: 0 auto;

        color: transparent;
        background-size: cover;
        background-position: center center;
        background-repeat: no-repeat;
    }
</style>
